<template>
  <div id="app-container" style="padding: 30px">

    <el-container height="1000">
      <el-aside width="150px" height="1000">
        <el-tree
          :data="data"
          :props="defaultProps"
          accordion
          :expand-on-click-node="false"
          @node-expand="handleSelectClick"
        >
        </el-tree>
      </el-aside>
      <div>
      <el-container>
        <el-header>
          <el-table :data="minelist" border fit highlight-current-row @current-change="handleCurrentChange">
            <el-table-column width="50">
              <template slot-scope="scope">　
                <el-radio
                  　　　　　　　　　　class="radio"
                  　　　　　　　　　　v-model="radio"
                  　　　　　　　　　 :label="scope.$index"
                  　　　　　　　　　　@change.native="getCurrentRow(scope.$index)">
                  {{''}}
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="mineName" label="矿井名称" width="120"/>
            <el-table-column label="瓦斯等级" width="130">
              <template slot-scope="scope">
                {{
                scope.row.mineGasGrade === 1 ? '高瓦斯矿井' :
                scope.row.mineGasGrade === 2 ? '低瓦斯矿井' : '低瓦斯矿井'
                }}
              </template>
            </el-table-column>
            <el-table-column prop="mineDesignPower" label="设计能力" width="110"/>
            <el-table-column prop="mineProductionTime" label="投产日期" width="120"/>
            <el-table-column prop="mineReformPower" label="改造能力" width="120"/>
            <el-table-column prop="mineReformTime" label="改造日期" width="120"/>
            <el-table-column prop="state" label="状态" width="100"/>
            <el-table-column prop="mineRemark" label="备注"/>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :page-size="pageSize"
            :current-page="pageNo"
            :total="total"
            :pager-count="11"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getPageMineList">
          </el-pagination>
          <!-- 操作按钮 -->
          <el-row>
            <el-col :span="2" :offset="8">
              <el-button type="primary" @click="toMine()">查看
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="toCreateMine()">创建
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="toUpdateMine()"
              >修改
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="deleteMine()"
              >删除
              </el-button>
            </el-col>
          </el-row>
        </el-header>

        <el-main>

        </el-main>
        <el-footer>
          <el-container>

          </el-container>
        </el-footer>
      </el-container>
      </div>
    </el-container>
    <div style="text-align: center">
      <el-container>
        <el-header>
          <el-table :data="minelist" border fit highlight-current-row @current-change="handleCurrentChange">
            <el-table-column width="50">
              <template slot-scope="scope">　
                <el-radio-group>
                  <el-radio
                    　　　　　　　　　　class="radio"
                    　　　　　　　　　　v-model="radio1"
                    　　　　　　　　　 :label="scope.$index"
                    　　　　　　　　　　@change.native="getCurrentRow(scope.$index)">
                    {{''}}
                  </el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column prop="mineName" label="矿井名称" width="120"/>
            <el-table-column label="瓦斯等级" width="130">
              <template slot-scope="scope">
                {{
                scope.row.mineGasGrade === 1 ? '高瓦斯矿井' :
                scope.row.mineGasGrade === 2 ? '低瓦斯矿井' : '低瓦斯矿井'
                }}
              </template>
            </el-table-column>
            <el-table-column prop="mineDesignPower" label="设计能力" width="110"/>
            <el-table-column prop="mineProductionTime" label="投产日期" width="120"/>
            <el-table-column prop="mineReformPower" label="改造能力" width="120"/>
            <el-table-column prop="mineReformTime" label="改造日期" width="120"/>
            <el-table-column prop="state" label="状态" width="100"/>
            <el-table-column prop="mineRemark" label="备注"/>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :page-size="pageSize"
            :current-page="pageNo"
            :total="total"
            :pager-count="11"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getPageMineList">
          </el-pagination>
          <!-- 操作按钮 -->
          <el-row>
            <el-col :span="2" :offset="8">
              <el-button type="primary" @click="toMine()">查看
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="toCreateMine()">创建
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="toUpdateMine()"
              >修改
              </el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="deleteMine()"
              >删除
              </el-button>
            </el-col>
          </el-row>
        </el-header>

        <el-main>

        </el-main>
        <el-footer>
          <el-container>

          </el-container>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
  import mine from '@/api/mes/mine'

  let id = 1000
  export default {
    data() {

      return {
        state: '',
        radio: 0,
        radio1:0,
        minelist: null,
        total: null,
        pageNo: 1,
        pageSize: 2,
        selectionnum: [],
        mine: {
          mineName: ''
        },
        data: [{
          id: 1,
          label: '煤矿基本信息',
          children: [{}]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    created() {
      this.getPageMineList()
    },
    methods: {
      handleSelectClick(data) {
        console.log(data)
        this.append(data)
      },
      append(data) {
        for (let i = 0; i < this.minelist.length; i++) {
          const newChild = { id: id++, label: this.minelist[i].mineName, children: [] }
          if (!data.children) {
            this.$set(data, 'children', [])
          }
          data.children.push(newChild)
        }
      },
      getPageMineList(pageNo = 1) {
        this.pageNo = pageNo
        mine.findPage(this.pageNo, this.pageSize)
          .then(response => {
            this.minelist = response.data.item.content
            this.total = response.data.item.totalElements
          })
      },
      toCreateMine() {
        this.$router.push('/basis/create')
      },
      toUpdateMine() {
        // ## 获取所有选中行的id组成的字符串，以逗号分隔
        var id = this.selectionnum.id
        // ## 跳转
        this.$router.push('/basis/update/' + id)
      },
      toMine(){
        var id = this.selectionnum.id
        this.$router.push('/basis/see/' + id)
      },
      deleteMine() {
        this.$confirm('此操作将永久删除该记录，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id = this.selectionnum.id
          mine.delete(id)
            .then(response => {
              this.selectionnum = null
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              // ## 重新查询
              this.getPageMineList()
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleCurrentChange(val) {
        this.selectionnum = val
      },
      getCurrentRow(index) {
        this.radio = index
      }
    }
  }
</script>

<style>
  .el-header, .el-footer {
    text-align: center;
    line-height: 50px;
  }

  .el-aside {
    text-align: center;
    line-height: 500px;
  }
</style>

